<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="../static/resources/bootstrap/css/bootstrap.css" rel="stylesheet">
    <link href="../static/resources/bootstrap/css/bootstrapValidator.min.css" rel="stylesheet">
    <!-- jQuery -->
    <script type="text/javascript" src="../static/resources/js/jquery/jquery-3.1.1.min.js"></script>
    <!-- Bootstrap JS -->
    <script type="text/javascript" src="../static/resources/bootstrap/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="../static/resources/bootstrap/js/bootstrapValidator.min.js"></script>
</head>
<body>
<div class="container">
    <form role="form" id="pwdForm">
        <div class="form-group">
            <label for="pwd1">请输入新密码:</label><input type="password" class="form-control" name="pwd1" id="pwd1">
        </div>
        <div class="form-group">
            <label for="pwd2">请确认新密码:</label><input type="password" class="form-control" name="pwd2" id="pwd2">
        </div>
        <input type="hidden" id="userId" value="${user.userId}">
        <input type="hidden" id="userName" value="${user.userName}">
        <div class="form-group">
            <div class="col-md-9 col-md-offset-3">
                <input type="button" value="确认" id="editBtn" class="btn btn-info">
                <input type="button" value="取消" id="cancleBtn" class="btn btn-info">
            </div>
        </div>
    </form>
</div>
</body>
</html>
<script>
    var updPwd = function () {
        $.ajax({
            type: "POST",
            url: "/updUserPwd",
            data: {
                userId: $("#userId").val(),
                userName: $("#userName").val(),
                password: $("#pwd2").val()
            }, success: function () {
                $("#cancleBtn").click();
            }, error: function () {
             //   alert("修改失败")
            }
        });
    };

    $("#editBtn").click(function () {
        $("#pwdForm").bootstrapValidator('validate');//提交验证
        if ($("#pwdForm").data('bootstrapValidator').isValid()) {//获取验证结果，如果成功，执行下面代码
                updPwd();
        }
    });

    $("#cancleBtn").click(function () {
        var index = parent.layer.getFrameIndex(window.name);
        parent.getUserByPage();
        parent.layer.close(index);
    });

    $('#pwdForm').bootstrapValidator({
        excluded: [':disabled', ':hidden', ':not(:visible)'],//排除无需验证的控件，比如被禁用的或者被隐藏的
        submitButtons: '#editBtn',//指定提交按钮，如果验证失败则变成disabled
        feedbackIcons: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields: {
            pwd1: {
                validators: {
                    notEmpty: {//检测非空,radio也可用
                        message: '必须输入密码'
                    },
                    stringLength: {//检测长度
                        min: 6,
                        max: 18,
                        message: '长度必须在6-18之间'
                    },
                    regexp: {//正则验证
                        regexp: /^[a-zA-Z0-9_\.]+$/,
                        message: '所输入的字符不符要求'
                    },
                    identical: {
                        field: 'pwd2',
                        message: '两次输入的密码不相符'
                    }
                }
            },
            pwd2: {
                validators: {
                    identical: {
                        field: 'pwd1',
                        message: '两次输入的密码不相符'
                    }
                }
            }
        }
    });
</script>